Webkomponenter: Et dypdykk i Custom Elements

Webkomponenter representerer et betydelig fremskritt innen webutvikling, og tilbyr en standardisert måte å skape gjenbrukbare og innkapslede UI-komponenter på. Blant kjerneteknologiene som utgjør Webkomponenter, fremstår Custom Elements som hjørnesteinen for å definere nye HTML-tagger med tilpasset oppførsel og rendering. Denne omfattende guiden dykker ned i detaljene rundt Custom Elements, og utforsker deres fordeler, implementering og beste praksis for å bygge moderne nettapplikasjoner.

Hva er Webkomponenter?

Webkomponenter er et sett med webstandarder som lar utviklere skape gjenbrukbare, innkapslede og interoperable HTML-elementer. De tilbyr en modulær tilnærming til webutvikling, som muliggjør opprettelsen av tilpassede UI-komponenter som enkelt kan deles og gjenbrukes på tvers av forskjellige prosjekter og rammeverk. Kjerneteknologiene bak Webkomponenter inkluderer:

• Custom Elements: Definerer nye HTML-tagger og deres tilhørende oppførsel.
• Shadow DOM: Gir innkapsling ved å skape et separat DOM-tre for en komponent, og skjermer dens stiler og skript fra det globale scopet.
• HTML-maler (Templates): Definerer gjenbrukbare HTML-strukturer som kan instansieres og manipuleres ved hjelp av JavaScript.

Forståelse av Custom Elements

Custom Elements er kjernen i Webkomponenter, og gjør det mulig for utviklere å utvide HTML-vokabularet med sine egne elementer. Disse tilpassede elementene oppfører seg som standard HTML-elementer, men de kan skreddersys til spesifikke applikasjonsbehov, noe som gir større fleksibilitet og kodeorganisering.

Definering av Custom Elements

For å definere et tilpasset element, må du bruke metoden customElements.define(). Denne metoden tar to argumenter:

1. Elementnavnet: En streng som representerer navnet på det tilpassede elementet. Navnet må inneholde en bindestrek (-) for å unngå konflikter med standard HTML-elementer. For eksempel er my-element et gyldig navn, mens myelement ikke er det.
2. Elementklassen: En JavaScript-klasse som utvider HTMLElement og definerer oppførselen til det tilpassede elementet.

Her er et grunnleggende eksempel:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

I dette eksempelet definerer vi et tilpasset element kalt my-element. Klassen MyElement utvider HTMLElement og setter elementets indre HTML til "Hello, World!" i konstruktøren.

Livssyklus-callbacks for Custom Elements

Tilpassede elementer har flere livssyklus-callbacks som lar deg utføre kode på ulike stadier i elementets livssyklus. Disse callbackene gir muligheter til å initialisere elementet, respondere på attributtendringer og rydde opp i ressurser når elementet fjernes fra DOM-en.

• connectedCallback(): Kalles når elementet settes inn i DOM-en. Dette er et godt sted å utføre initialiseringsoppgaver, som å hente data eller legge til hendelseslyttere.
• disconnectedCallback(): Kalles når elementet fjernes fra DOM-en. Dette er et godt sted å rydde opp i ressurser, som å fjerne hendelseslyttere eller frigjøre minne.
• attributeChangedCallback(name, oldValue, newValue): Kalles når et attributt på elementet endres. Denne callbacken lar deg respondere på attributtendringer og oppdatere elementets rendering tilsvarende. Du må spesifisere hvilke attributter som skal observeres ved hjelp av observedAttributes-getteren.
• adoptedCallback(): Kalles når elementet flyttes til et nytt dokument.

Her er et eksempel som demonstrerer bruken av livssyklus-callbacks:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

I dette eksempelet logger connectedCallback() en melding til konsollen og setter den indre HTML-en til elementet når det kobles til DOM-en. disconnectedCallback() logger en melding når elementet kobles fra. attributeChangedCallback() kalles når data-message-attributtet endres, og oppdaterer elementets innhold tilsvarende. observedAttributes-getteren spesifiserer at vi ønsker å observere endringer i data-message-attributtet.

Bruk av Shadow DOM for innkapsling

Shadow DOM gir innkapsling for webkomponenter, og lar deg lage et separat DOM-tre for en komponent som er isolert fra resten av siden. Dette betyr at stiler og skript definert innenfor Shadow DOM ikke vil påvirke resten av siden, og omvendt. Denne innkapslingen bidrar til å forhindre konflikter og sikrer at komponentene dine oppfører seg forutsigbart.

For å bruke Shadow DOM, kan du kalle metoden attachShadow() på elementet. Denne metoden tar et opsjonsobjekt som spesifiserer modusen til Shadow DOM. mode kan være enten 'open' eller 'closed'. Hvis modusen er 'open', kan Shadow DOM nås fra JavaScript ved hjelp av shadowRoot-egenskapen til elementet. Hvis modusen er 'closed', kan ikke Shadow DOM nås fra JavaScript.

Her er et eksempel som demonstrerer bruken av Shadow DOM:

            class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.
    `;
  }
}

customElements.define('my-element', MyElement);
            

              
                Copy
              
            
          

I dette eksempelet fester vi en Shadow DOM til elementet med mode: 'open'. Deretter setter vi den indre HTML-en til Shadow DOM-en til å inkludere en stil som setter fargen på avsnitt til blå, og et avsnittselement med litt tekst. Stilen definert innenfor Shadow DOM vil kun gjelde for elementer innenfor Shadow DOM, og vil ikke påvirke avsnitt utenfor Shadow DOM.

Fordeler ved å bruke Custom Elements

Custom Elements tilbyr flere fordeler for webutvikling:

• Gjenbrukbarhet: Custom Elements kan gjenbrukes på tvers av forskjellige prosjekter og rammeverk, noe som reduserer kodeduplisering og forbedrer vedlikeholdbarheten.
• Innkapsling: Shadow DOM gir innkapsling, forhindrer stil- og skriptkonflikter og sikrer at komponenter oppfører seg forutsigbart.
• Interoperabilitet: Custom Elements er basert på webstandarder, noe som gjør dem interoperable med andre webteknologier og rammeverk.
• Vedlikeholdbarhet: Den modulære naturen til Webkomponenter gjør det enklere å vedlikeholde og oppdatere kode. Endringer i en komponent er isolert, noe som reduserer risikoen for å ødelegge andre deler av applikasjonen.
• Ytelse: Custom Elements kan forbedre ytelsen ved å redusere mengden kode som må parses og utføres. De tillater også mer effektiv rendering og oppdateringer.

Praktiske eksempler på Custom Elements

La oss utforske noen praktiske eksempler på hvordan Custom Elements kan brukes til å bygge vanlige UI-komponenter.

En enkel teller-komponent

Dette eksempelet viser hvordan man lager en enkel teller-komponent ved hjelp av Custom Elements.

            class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        -
        ${this._count}
        +
      
    `;
  }
}

customElements.define('my-counter', Counter);
            

              
                Copy
              
            
          

Denne koden definerer en Counter-klasse som utvider HTMLElement. Konstruktøren initialiserer komponenten, fester en Shadow DOM, og setter den opprinnelige tellingen til 0. connectedCallback()-metoden legger til hendelseslyttere på øknings- og minkningsknappene. increment()- og decrement()-metodene oppdaterer tellingen og kaller render()-metoden for å oppdatere komponentens rendering. render()-metoden setter den indre HTML-en til Shadow DOM-en for å inkludere tellervisningen og knappene.

En bildekarusell-komponent

Dette eksempelet viser hvordan man lager en bildekarusell-komponent ved hjelp av Custom Elements. For korthets skyld er bildékildene plassholdere og kunne vært lastet dynamisk fra et API, et CMS, eller lokal lagring. Stylingen har også blitt minimert.

            class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  
  

  Previous
  Next
  
  
  `;
 }
}

customElements.define('image-carousel', ImageCarousel);
            

              
                Copy
              
            
          

Denne koden definerer en ImageCarousel-klasse som utvider HTMLElement. Konstruktøren initialiserer komponenten, fester en Shadow DOM, og setter den opprinnelige bildelisten og gjeldende indeks. connectedCallback()-metoden legger til hendelseslyttere på forrige- og neste-knappene. nextImage()- og prevImage()-metodene oppdaterer gjeldende indeks og kaller render()-metoden for å oppdatere komponentens rendering. render()-metoden setter den indre HTML-en til Shadow DOM-en for å inkludere det gjeldende bildet og knappene.

Beste praksis for arbeid med Custom Elements

Her er noen beste praksiser å følge når du jobber med Custom Elements:

• Bruk beskrivende elementnavn: Velg elementnavn som tydelig indikerer formålet med komponenten.
• Bruk Shadow DOM for innkapsling: Shadow DOM hjelper med å forhindre stil- og skriptkonflikter og sikrer at komponenter oppfører seg forutsigbart.
• Bruk livssyklus-callbacks på en hensiktsmessig måte: Bruk livssyklus-callbacks til å initialisere elementet, respondere på attributtendringer og rydde opp i ressurser når elementet fjernes fra DOM-en.
• Bruk attributter for konfigurasjon: Bruk attributter til å konfigurere oppførselen og utseendet til komponenten.
• Bruk events (hendelser) for kommunikasjon: Bruk tilpassede hendelser for å kommunisere mellom komponenter.
• Sørg for en reserveopplevelse (fallback): Vurder å tilby en reserveopplevelse for nettlesere som ikke støtter Webkomponenter. Dette kan gjøres ved hjelp av progressiv forbedring.
• Tenk på internasjonalisering (i18n) og lokalisering (l10n): Når du utvikler webkomponenter, vurder hvordan de vil bli brukt i forskjellige språk og regioner. Design komponentene dine slik at de enkelt kan oversettes og lokaliseres. For eksempel, eksternaliser alle tekststrenger og sørg for mekanismer for å laste oversettelser dynamisk. Sørg for at dato- og tidsformater, valutasymboler og andre regionale innstillinger håndteres korrekt.
• Vurder tilgjengelighet (a11y): Webkomponenter bør utformes med tilgjengelighet i tankene fra starten av. Bruk ARIA-attributter der det er nødvendig for å gi semantisk informasjon til hjelpemidler. Sørg for at tastaturnavigasjon er fullt støttet og at fargekontrasten er tilstrekkelig for brukere med synshemninger. Test komponentene dine med skjermlesere for å verifisere tilgjengeligheten.

Custom Elements og rammeverk

Custom Elements er designet for å være interoperable med andre webteknologier og rammeverk. De kan brukes i forbindelse med populære rammeverk som React, Angular og Vue.js.

Bruk av Custom Elements i React

For å bruke Custom Elements i React, kan du enkelt rendere dem som ethvert annet HTML-element. Du må imidlertid kanskje bruke en ref for å få tilgang til det underliggende DOM-elementet og samhandle direkte med det.

            import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;
            

              
                Copy
              
            
          

I dette eksempelet bruker vi en ref for å få tilgang til my-element-komponenten og legge til en hendelseslytter på den. Dette lar oss lytte etter tilpassede hendelser sendt av komponenten og respondere deretter.

Bruk av Custom Elements i Angular

For å bruke Custom Elements i Angular, må du konfigurere Angular til å gjenkjenne det tilpassede elementet. Dette kan gjøres ved å legge til det tilpassede elementet i schemas-arrayet i modulens konfigurasjon.

            import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

            

              
                Copy
              
            
          

Når det tilpassede elementet er registrert, kan du bruke det i dine Angular-maler som ethvert annet HTML-element.

Bruk av Custom Elements i Vue.js

Vue.js støtter også Custom Elements nativt. Du kan bruke dem direkte i malene dine uten spesiell konfigurasjon.

            


            

              
                Copy
              
            
          

Vue vil automatisk gjenkjenne det tilpassede elementet og rendere det korrekt.

Hensyn til tilgjengelighet

Når du bygger Custom Elements, er det avgjørende å ta hensyn til tilgjengelighet for å sikre at komponentene dine kan brukes av alle, inkludert personer med nedsatt funksjonsevne. Her er noen sentrale hensyn til tilgjengelighet:

• Semantisk HTML: Bruk semantiske HTML-elementer når det er mulig for å gi meningsfull struktur til komponentene dine.
• ARIA-attributter: Bruk ARIA-attributter for å gi ytterligere semantisk informasjon til hjelpemidler, som skjermlesere.
• Tastaturnavigasjon: Sørg for at komponentene dine kan navigeres med tastaturet. Dette er spesielt viktig for interaktive elementer, som knapper og lenker.
• Fargekontrast: Sørg for at det er tilstrekkelig fargekontrast mellom tekst- og bakgrunnsfarger for å gjøre teksten lesbar for personer med synshemninger.
• Fokus-håndtering: Håndter fokus korrekt for å sikre at brukere enkelt kan navigere gjennom komponentene dine.
• Test med hjelpemidler: Test komponentene dine med hjelpemidler, som skjermlesere, for å sikre at de er tilgjengelige.

Internasjonalisering og lokalisering

Når du utvikler Custom Elements for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n). Her er noen sentrale hensyn:

• Tekstretning: Støtt både venstre-til-høyre (LTR) og høyre-til-venstre (RTL) tekstretninger.
• Dato- og tidsformater: Bruk passende dato- og tidsformater for ulike lokaliteter.
• Valutasymboler: Bruk passende valutasymboler for ulike lokaliteter.
• Oversettelse: Tilby oversettelser for alle tekststrenger i komponentene dine.
• Tallformatering: Bruk passende tallformatering for ulike lokaliteter.

Konklusjon

Custom Elements er et kraftig verktøy for å bygge gjenbrukbare og innkapslede UI-komponenter. De tilbyr flere fordeler for webutvikling, inkludert gjenbrukbarhet, innkapsling, interoperabilitet, vedlikeholdbarhet og ytelse. Ved å følge beste praksis som er beskrevet i denne guiden, kan du utnytte Custom Elements til å bygge moderne nettapplikasjoner som er robuste, vedlikeholdbare og tilgjengelige for et globalt publikum. Etter hvert som webstandarder fortsetter å utvikle seg, vil Webkomponenter, inkludert Custom Elements, bli stadig viktigere for å skape modulære og skalerbare nettapplikasjoner.

Omfavn kraften i Custom Elements for å bygge fremtidens web, én komponent om gangen. Husk å ta hensyn til tilgjengelighet, internasjonalisering og lokalisering for å sikre at komponentene dine kan brukes av alle, overalt.